<template>
  <div>
    <van-nav-bar
      title="物流信息"
      left-text="返回"
      left-arrow
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="20"/>
      </template>
    </van-nav-bar>
    <div v-for="(item,index) in info.context" :key="index" class="express-list">
      <div class="express-info">

        <span v-if="!recived(index)"
              :class="{iconfont:true,'icon-finishi':recived(index),'icon-next':!recived(index) ,'icon-wrap':true} "></span>
        <div v-else class="icon-wrap finish-wrap ">
          <span style="color: green"
                :class="{iconfont:true,'icon-finishi':recived(index),'icon-next':!recived(index),finish:true  } "></span>

        </div>
        <span class="font">{{ formatTime(item.time) }}</span>
        <br>
        <span class="font" style="margin-top: 10px;display: inline-block">{{ item.desc }}</span>

      </div>
      <div class="divier"></div>
    </div>

  </div>
</template>

<script>

import OrderDetail from '@/components/OrderDetail'

export default {
  name: 'detail',
  components: {OrderDetail},

  data () {
    return {
      info: {
        'status': '1',
        'state': '3',
        'com': 'zhongtong',
        'context': [
          {
            'time': '1625971043',
            'desc': '【石家庄市】 您的快递已签收, 签收人在【快递超市的福美十二号楼店】(福美公馆十二号楼二单元101)领取。如有疑问请电联:（13675822625）, 投诉电话:（18732141927）, 您的快递已经妥投。风里来雨里去, 只为客官您满意。上有老下有小, 赏个好评好不好？【请在评价快递员处帮忙点亮五颗星星哦~】'
          },
          {
            'time': '1625970416',
            'desc': '【石家庄市】 快件已被【快递超市的福美十二号楼店】代收，如有问题请电联（18732141927），感谢使用中通快递，期待再次为您服务！'
          },
          {
            'time': '1625961385',
            'desc': '【石家庄市】 【石家庄赵县】 的刘世涛（13675822625） 正在第1次派件, 请保持电话畅通,并耐心等待（95720为中通快递员外呼专属号码，请放心接听）'
          },
          {
            'time': '1625961384',
            'desc': '【石家庄市】 快件已经到达 【石家庄赵县】'
          },
          {
            'time': '1625890756',
            'desc': '【石家庄市】 快件离开 【石家庄】 已发往 【石家庄赵县】'
          },
          {
            'time': '1625890291',
            'desc': '【石家庄市】 快件已经到达 【石家庄】'
          },
          {
            'time': '1625767064',
            'desc': '【东莞市】 快件离开 【虎门中心】 已发往 【石家庄】'
          },
          {
            'time': '1625766900',
            'desc': '【东莞市】 快件已经到达 【虎门中心】'
          },
          {
            'time': '1625757979',
            'desc': '【深圳市】 快件离开 【深圳沙井】 已发往 【石家庄】'
          },
          {
            'time': '1625749522',
            'desc': '【深圳市】 【深圳沙井】（0755-61248067） 的 客户已发货（13610436420） 已揽收'
          }
        ],
        'send_time': '2021-07-08 21:05:22',
        'latest_progress': '【石家庄市】 您的快递已签收, 签收人在【快递超市的福美十二号楼店】(福美公馆十二号楼二单元101)领取。如有疑问请电联:（13675822625）, 投诉电话:（18732141927）, 您的快递已经妥投。风里来雨里去, 只为客官您满意。上有老下有小, 赏个好评好不好？【请在评价快递员处帮忙点亮五颗星星哦~】',
        'departure_city': '深圳沙井',
        'arrival_city': '快递超市的福美十二号楼店',
        '_source_com': 'zhongtong',
        '_support_from': 'partner',
        'isAbstract': '1',
        'current': '已签收',
        'currentStatus': '5',
        'latest_time': '进展更新于 2021-07-11 10:37:23'
      }
    }
  },
  methods: {
    back () {
      this.$router.back()
    },
    recived (index) {
      return index === 0 && this.info.status === '1'
    },
    formatTime (time) {
      var date = new Date(time * 1000)
      var YY = date.getFullYear() + '-'
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return YY + MM + DD + ' ' + hh + mm + ss
    }
  }
}
</script>

<style scoped>
@import "../../assets/icon/iconfont.css";
.footer{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: right;
  padding: 10px;
}
.finish-wrap {
  padding-top: 80px;
  background: white;
}

.divier {
  background: #f5f5f5;
  height: 1px;
}

.express-list {
  background: white;
}

.icon-wrap {
  width: 22px;
  font-size: 16px;
  display: inline;
  border-radius: 10px;
  background: white;
  position: relative;
  margin-top: 20px;
  margin-left: -18px;
}

.font {
  font-size: 14px;
}

.icon {
  font-size: 20px;
  width: 22px;
  height: 22px;
}

.express-info {
  padding: 10px;
  margin-left: 15px;
  border-left: 1px solid #c5c5c5;
}

.express-item {
  background: white;
  display: flex;
  flex-direction: row;
}

.line {
  padding: 1px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.finish {
  position: relative;
  padding-top: 40px;
  background: #fff;
}
</style>
